<!--
 * @Author: Cenven
 * @Date: 2021-03-23 16:00:02
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-04-08 11:36:56
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="mobile-footer" v-if="isShowBottomNav">
    <van-tabbar route>
      <div class="nav-list">
        <div
          :class="['nav-item', routeIndex == 1 ? 'active' : '']"
          @click="$router.push('/m/index')"
          v-if="kl_md.KLDLTK == 0"
        >
          <template v-if="!web_info.BOTTOM_NAV_LOGO">
            <img src="/img/mobile/index_tab_home_active@2x.png" alt="" />
            <div>首页</div>
          </template>
          <img
            class="nav-logo"
            v-if="web_info.BOTTOM_NAV_LOGO"
            v-lazy="web_info.BOTTOM_NAV_LOGO"
          />
        </div>
        <div
          :class="['nav-item', routeIndex == 2 ? 'active' : '']"
          @click="$router.push('/m/classify')"
          v-if="kl_md.KLDLTK == 0"
        >
          <img
            v-if="routeIndex == 2"
            src="/img/mobile/index_tab_sort@2x.png"
            alt=""
          />
          <img v-else src="/img/mobile/index_tab_sort_active@2x.png" alt="" />
          <div>课程</div>
        </div>
        <!-- 新版题库 -->
        <div
          :class="['nav-item', routeIndex == 3 ? 'active' : '']"
          @touchstart="$router.push('/m/v2-question-bank')"
        >
          <img
            v-if="routeIndex == 3"
            src="/img/mobile/index_tab_topic@2x.png"
            alt=""
          />
          <img v-else src="/img/mobile/index_tab_topic_active@2x.png" alt="" />
          <div>题库</div>
        </div>
        <!-- <div :class="['nav-item',routeIndex == 3 ? 'active' : '']" @click ="$router.push('/m/question-bank')">
          <img v-if="routeIndex == 3" src="/img/mobile/index_tab_topic@2x.png" alt="">
          <img v-else src="/img/mobile/index_tab_topic_active@2x.png" alt="">
          <div>题库</div>
        </div> -->
        <div
          :class="['nav-item', routeIndex == 4 ? 'active' : '']"
          @click="$router.push('/m/user')"
        >
          <img
            v-if="routeIndex == 4"
            src="/img/mobile/index_tab_me@2x.png"
            alt=""
          />
          <img v-else src="/img/mobile/index_tab_me_active@2x.png" alt="" />
          <div>我的</div>
        </div>
      </div>
      <!-- <van-tabbar-item replace to="/m/index" icon="home-o">{{
        $t("locale.components.mobile.Footer.t1")
      }}</van-tabbar-item>
      <van-tabbar-item replace to="/m/classify" icon="search">{{
        $t("locale.components.mobile.Footer.t2")
      }}</van-tabbar-item>
      <van-tabbar-item replace to="/m/question-bank" icon="orders-o"
        >题库</van-tabbar-item
      >
      <van-tabbar-item replace to="/m/user" icon="manager-o">{{
        $t("locale.components.mobile.Footer.t4")
      }}</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "V2MFooter",
  components: {},
  data() {
    return {
      active: ""
    };
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    isShowBottomNav() {
      return this.$route.meta.isShowBottomNav;
    },
    routeIndex() {
      if (this.$route.name === "Mindex") {
        return 1;
      } else if (this.$route.name === "Mclassify") {
        return 2;
      } else if (this.$route.name === "MV2QuestionBank") {
        return 3;
      } else if (this.$route.name === "Muser") {
        return 4;
      }
    }
  },
  watch: {},
  methods: {
    onChange(cb) {
      console.log(cb);
    }
  },
  created() {
    // console.log("footer组件页面--路由",this.$route);
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.mobile-footer {
}
</style>
<style lang="scss">
.mobile-footer {
  width: 7.2rem;
  // height: 0.8rem;
  height: 0.9408rem;
  // position: fixed;
  // left: 0;
  // bottom: 0;
  z-index: 99999;
  // background-color: red;
  .nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .nav-item {
      flex: 1;
      width: 1.8rem;
      height: 0.9408rem;
      font-size: 0.1727rem;
      font-weight: bold;
      color: #939599;
      text-align: center;
      padding-top: 0.14rem;
      .nav-logo {
        display: block;
        width: 0.6528rem;
        height: 0.6528rem;
        margin: 0 auto 0;
      }
      img {
        width: 0.432rem;
        height: 0.432rem;
        display: block;
        margin: 0 auto;
      }
    }
    .nav-item.active {
      color: #313233;
    }
  }
  .van-tabbar {
    width: 7.2rem;
    height: 0.9408rem;
    .van-tabbar-item {
      font-size: 0.22rem;
      .van-tabbar-item__icon {
        font-size: 0.35rem;
        margin-bottom: 0.07rem;
      }
    }
  }
  .van-tabbar--fixed {
    left: 0;
  }
}
@supports (bottom: constant(safe-area-inset-bottom)) {
  .mobile-footer {
    padding-bottom: constant(safe-area-inset-bottom);
  }
  .van-tabbar {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .mobile-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .van-tabbar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
